<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico">

        <title>Ubold - Responsive Admin Dashboard Template</title>

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script src="assets/js/modernizr.min.js"></script>


    </head>


    <body class="fixed-left" id="do-nicescrol">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                    </div>
                </div>

                <h4 class="page-title">按钮</h4>
                <p class="text-muted page-title-alt">欢迎来到Ubold管理面板 !</p>

            </div>
        </div>


        <!-- Row start -->
        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>默认按钮</b></h4>
                            <p class="text-muted m-b-30 font-13">
                               使用一个按钮类<code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, 或 <code>&lt;input&gt;</code> 元素.
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-default waves-effect waves-light">Default</button>
                                <button type="button" class="btn btn-white waves-effect">White</button>
                                <button type="button" class="btn btn-primary waves-effect waves-light">Primary</button>
                                <button type="button" class="btn btn-success waves-effect waves-light">Success</button>
                                <button type="button" class="btn btn-info waves-effect waves-light">Info</button>
                                <button type="button" class="btn btn-warning waves-effect waves-light">Warning</button>
                                <button type="button" class="btn btn-danger waves-effect waves-light">Danger</button>
                                <button type="button" class="btn btn-inverse waves-effect waves-light">Inverse</button>
                                <button type="button" class="btn btn-purple waves-effect waves-light">Purple</button>
                                <button type="button" class="btn btn-pink waves-effect waves-light">Pink</button>
                                <button type="button" class="btn btn-link waves-effect">Link</button>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>圆形的按钮</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                添加 <code>.btn-rounded</code> 到默认按钮以获得圆角.
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-default btn-rounded waves-effect waves-light">Default</button>
                                <button type="button" class="btn btn-primary btn-rounded waves-effect waves-light">Primary</button>
                                <button type="button" class="btn btn-success btn-rounded waves-effect waves-light">Success</button>
                                <button type="button" class="btn btn-info btn-rounded waves-effect waves-light">Info</button>
                                <button type="button" class="btn btn-warning btn-rounded waves-effect waves-light">Warning</button>
                                <button type="button" class="btn btn-danger btn-rounded waves-effect waves-light">Danger</button>
                                <button type="button" class="btn btn-inverse btn-rounded waves-effect waves-light">Inverse</button>
                                <button type="button" class="btn btn-purple btn-rounded waves-effect waves-light">Purple</button>
                                <button type="button" class="btn btn-pink btn-rounded waves-effect waves-light">Pink</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- End of Row -->

        <!-- Row start -->
        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">

                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>大纲按钮</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                使用一个类 <code>.btn-custom</code> 来快速创建一个大纲.
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-default btn-custom waves-effect waves-light">Default</button>
                                <button type="button" class="btn btn-white btn-custom waves-effect">White</button>
                                <button type="button" class="btn btn-primary btn-custom waves-effect waves-light">Primary</button>
                                <button type="button" class="btn btn-success btn-custom waves-effect waves-light">Success</button>
                                <button type="button" class="btn btn-info btn-custom waves-effect waves-light">Info</button>
                                <button type="button" class="btn btn-warning btn-custom waves-effect waves-light">Warning</button>
                                <button type="button" class="btn btn-danger btn-custom waves-effect waves-light">Danger</button>
                                <button type="button" class="btn btn-inverse btn-custom waves-effect waves-light">Inverse</button>
                                <button type="button" class="btn btn-purple btn-custom waves-effect waves-light">Purple</button>
                                <button type="button" class="btn btn-pink btn-custom waves-effect waves-light">Pink</button>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>大纲圆形的按钮</b></h4>
                            <p class="text-muted m-b-30 font-13">
                               添加 <code>.btn-custom .btn-rounded</code> 获得干净的圆角按钮.
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-default btn-custom btn-rounded waves-effect waves-light">Default</button>
                                <button type="button" class="btn btn-white btn-custom btn-rounded waves-effect">White</button>
                                <button type="button" class="btn btn-primary btn-custom btn-rounded waves-effect waves-light">Primary</button>
                                <button type="button" class="btn btn-success btn-custom btn-rounded waves-effect waves-light">Success</button>
                                <button type="button" class="btn btn-info btn-custom btn-rounded waves-effect waves-light">Info</button>
                                <button type="button" class="btn btn-warning btn-custom btn-rounded waves-effect waves-light">Warning</button>
                                <button type="button" class="btn btn-danger btn-custom btn-rounded waves-effect waves-light">Danger</button>
                                <button type="button" class="btn btn-inverse btn-custom btn-rounded waves-effect waves-light">Inverse</button>
                                <button type="button" class="btn btn-purple btn-custom btn-rounded waves-effect waves-light">Purple</button>
                                <button type="button" class="btn btn-pink btn-custom btn-rounded waves-effect waves-light">Pink</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <!-- End of Row -->



        <!-- Row start -->
        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">

                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>按钮标签</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                使用一个按钮类 <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>,
                                或 <code>&lt;input&gt;</code> 元素。并把 <code>&lt;span&gt;</code>
                                和 <code>.btn-label</code> 和任意 <code>icon</code> 在它里面。如果你想要把右侧的图标，然后添加类 <code>.btn-label-right</code> 中 <code>&lt;span&gt;</code>
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-success waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-check"></i>
                                   </span>Success</button>

                                <button type="button" class="btn btn-danger waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-times"></i>
                                   </span>Danger</button>

                                <button type="button" class="btn btn-info waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-exclamation"></i>
                                   </span>Info</button>

                                <button type="button" class="btn btn-warning waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-warning"></i>
                                   </span>Warning</button>
                                <br>

                                <button type="button" class="btn btn-default waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-arrow-left"></i>
                                   </span>Left</button>

                                <button type="button" class="btn btn-default waves-effect waves-light">Right
                                   <span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i>
                                   </span>
                                </button>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>按钮标签圆形</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                使用一个按钮类<code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>,
                                或 <code>&lt;input&gt;</code> 元素。并把 <code>&lt;span&gt;</code>
                                和 <code>.btn-label</code> 和任何 <code>icon</code> 在它里面。如果你想要把右侧的图标，然后添加类 <code>.btn-label-right</code> 中 <code>&lt;span&gt;</code>
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-success btn-rounded waves-effect waves-light">
                                    <span class="btn-label"><i class="fa fa-check"></i></span>
                                    Success
                                </button>

                                <button type="button" class="btn btn-danger btn-rounded waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-times"></i>
                                   </span>Danger</button>

                                <button type="button" class="btn btn-info btn-rounded waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-exclamation"></i>
                                   </span>Info</button>

                                <button type="button" class="btn btn-warning btn-rounded waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-warning"></i>
                                   </span>Warning</button>
                                <br>

                                <button type="button" class="btn btn-default btn-rounded waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-arrow-left"></i>
                                   </span>Left</button>

                                <button type="button" class="btn btn-default btn-rounded waves-effect waves-light">Right
                                   <span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i>
                                   </span>
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <!-- End of Row -->

        <!-- Row start -->
        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-lg-12 col-xl-4">
                            <h4 class="header-title m-t-0"><b>按键宽度</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                过加入添加创建具有最小宽度的按钮 <code>.w-xs</code>, <code>.w-sm</code>, <code>.w-md</code> or <code>.w-lg</code>.
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-primary waves-effect waves-light w-xs">Xs</button>
                                <button type="button" class="btn btn-purple waves-effect waves-light w-sm">Small</button>
                                <button type="button" class="btn btn-info waves-effect waves-light w-md">Middle</button>
                                <button type="button" class="btn btn-warning waves-effect waves-light w-lg">Large</button>
                            </div>
                        </div>

                        <div class="col-lg-12 col-xl-4">
                            <h4 class="header-title m-t-0"><b>按钮大小</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                添加<code>.btn-lg</code>, <code>.btn-sm</code>, 或 <code>.btn-xs</code> 其他尺寸.
                            </p>

                            <div class="button-list">
                                <button class="btn btn-primary waves-effect waves-light btn-lg">Large button</button>
                                <button class="btn btn-danger waves-effect waves-light">Normal button</button>
                                <button class="btn btn-success waves-effect waves-light btn-sm">Small button</button>
                                <button class="btn btn-purple waves-effect waves-light btn-xs">Extra small button</button>
                            </div>
                        </div>

                        <div class="col-lg-12 col-xl-4">
                            <h4 class="header-title m-t-0"><b>按钮禁用</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                将该 <code>disabled</code> 属性添加到 <code>&lt;button&gt;</code> 按钮.
                            </p>

                            <div class="button-list">
                                <button class="btn btn-info disabled">Info</button>
                                <button class="btn btn-purple disabled">Purple</button>
                                <button class="btn btn-pink disabled">Pink</button>
                                <button class="btn btn-inverse disabled">Inverse</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- End of Row -->

        <!-- Row start -->
        <div class="row">
            <div class="col-md-6 col-lg-6">
                <div class="card-box">
                    <h4 class="header-title m-t-0"><b>图标按钮</b></h4>
                    <p class="text-muted m-b-30 font-13">
                       仅图标按钮
                    </p>

                    <div class="button-list">
                        <button class="btn btn-icon waves-effect btn-default waves-light"> <i class="fa fa-heart-o"></i> </button>
                        <button class="btn btn-icon waves-effect waves-light btn-danger"> <i class="fa fa-remove"></i> </button>
                        <button class="btn btn-icon waves-effect waves-light btn-purple"> <i class="fa fa-music"></i> </button>
                        <button class="btn btn-icon waves-effect waves-light btn-primary"> <i class="fa fa-star"></i> </button>
                        <button class="btn btn-icon waves-effect waves-light btn-success"> <i class="fa fa-thumbs-o-up"></i> </button>
                        <button class="btn btn-icon waves-effect waves-light btn-info"> <i class="fa fa-keyboard-o"></i> </button>
                        <button class="btn btn-icon waves-effect waves-light btn-warning"> <i class="fa fa-wrench"></i> </button>
                        <br>
                        <button class="btn btn-default waves-effect waves-light"> <i class="fa fa-heart m-r-5"></i> <span>Like</span> </button>
                        <button class="btn btn-inverse waves-effect waves-light"> <i class="fa fa-envelope-o m-r-5"></i> <span>Share</span> </button>
                        <button class="btn btn-warning waves-effect waves-light"> <i class="fa fa-rocket m-r-5"></i> <span>Launch</span> </button>
                        <button class="btn btn-info waves-effect waves-light"> <i class="fa fa-cloud m-r-5"></i> <span>Cloud Hosting</span> </button>
                        <button class="btn btn-pink waves-effect waves-light"> <span>Book Flight</span> <i class="fa fa-plane m-l-5"></i> </button>
                        <button class="btn btn-purple waves-effect waves-light"> <span>Donate Money</span> <i class="fa fa-money m-l-5"></i> </button>
                    </div>
                </div>
                <!-- end card-box -->

                <div class="card-box">
                    <h4 class="header-title m-t-0"><b>块按钮</b></h4>
                    <p class="text-muted m-b-30 font-13">
                        通过添加添加创建块级按钮 <code>.btn-block</code>.
                    </p>

                    <div class="">
                        <button type="button" class="btn btn-block btn-lg btn-primary waves-effect waves-light">Block Button</button>
                        <button type="button" class="btn btn-block btn--md btn-pink waves-effect waves-light">Block Button</button>
                        <button type="button" class="btn btn-block btn-sm btn-success waves-effect waves-light">Block Button</button>
                    </div>
                </div>
                <!-- end card-box -->


            </div> <!-- end col-6 -->

            <div class="col-md-6 col-lg-6">
                <div class="card-box">
                    <h4 class="header-title m-t-0"><b>块按钮</b></h4>
                    <p class="text-muted m-b-30 font-13">用 <code>.btn</code> 包裹一系列的按钮 <code>.btn-group</code>.</p>
                    <div class="btn-group m-b-20">
                        <button type="button" class="btn btn-white waves-effect">Left</button>
                        <button type="button" class="btn btn-white waves-effect">Middle</button>
                        <button type="button" class="btn btn-white waves-effect">Right</button>
                    </div>
                    <br>
                    <div class="btn-group btn-group-justified m-b-20">
                        <a class="btn btn-white waves-effect waves-light" role="button">Left</a>
                        <a class="btn btn-white waves-effect waves-light" role="button">Middle</a>
                        <a class="btn btn-white waves-effect waves-light" role="button">Right</a>
                    </div>
                    <div class="btn-group m-b-20">
                        <button type="button" class="btn btn-white waves-effect">1</button>
                        <button type="button" class="btn btn-white waves-effect">2</button>
                        <button type="button" class="btn btn-white waves-effect">3</button>
                        <button type="button" class="btn btn-white waves-effect">4</button>
                    </div>
                    <div class="btn-group m-b-20">
                        <button type="button" class="btn btn-white waves-effect">5</button>
                        <button type="button" class="btn btn-white waves-effect">6</button>
                        <button type="button" class="btn btn-white waves-effect">7</button>
                    </div>
                    <div class="btn-group m-b-20">
                        <button type="button" class="btn btn-white waves-effect">8</button>
                    </div>
                    <br>
                    <div class="btn-group m-b-20">
                        <button type="button" class="btn btn-white waves-effect">1</button>
                        <button type="button" class="btn btn-white waves-effect">2</button>
                        <button type="button" class="btn btn-white waves-effect">3</button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-white dropdown-toggle  waves-effect" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="btn-group-vertical m-b-20">
                                <button type="button" class="btn btn-white waves-effect">Top</button>
                                <button type="button" class="btn btn-white waves-effect">Middle</button>
                                <button type="button" class="btn btn-white waves-effect">Bottom</button>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="btn-group-vertical m-b-20">
                                <button type="button" class="btn btn-white waves-effect">Button 1</button>
                                <button type="button" class="btn btn-white waves-effect">Button 2</button>
                                <button type="button" class="btn btn-white dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Button 3 <span class="caret"></span> </button>
                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- end col -->

        </div>
        <!-- End of Row -->


        <!-- Row start -->
        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>下拉</b></h4>
                            <p class="text-muted m-b-30 font-13">
                               将一个按钮转换为下拉式切换，并进行一些基本的标记更改.
                            </p>

                            <div class="">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-pink dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-purple dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>拆分按钮下拉列表</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                将一个按钮转换为下拉式切换，并进行一些基本的标记更改.
                            </p>

                            <div class="">
                                <div class="btn-group dropdown">
                                    <button type="button" class="btn btn-success waves-effect waves-light">Dropddown</button>
                                    <button type="button" class="btn btn-success dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false"><i class="caret"></i></button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                    </div>
                                </div>
                                <div class="btn-group dropdown">
                                    <button type="button" class="btn btn-primary waves-effect waves-light">Dropddown</button>
                                    <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false"><i class="caret"></i></button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                    </div>
                                </div>
                                <div class="btn-group dropdown">
                                    <button type="button" class="btn btn-default waves-effect waves-light">Dropddown</button>
                                    <button type="button" class="btn btn-default waves-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"><i class="caret"></i></button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- End of Row -->


        <!-- Row start -->
        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>上拉</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                通过添加 <code>.dropup</code> 到父级，可以将下拉菜单更改为向上（而不是向下）扩展。
                            </p>

                            <div class="btn-group dropup">
                                <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                </div>
                            </div>
                            <div class="btn-group dropup">
                                <button type="button" class="btn btn-warning dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                </div>
                            </div>
                            <div class="btn-group dropup">
                                <button type="button" class="btn btn-success dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                </div>
                            </div>
                            <div class="btn-group dropup">
                                <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown One</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Two</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Three</a>
                                    <a class="dropdown-item" href="ui-buttons.html#">Dropdown Four</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>文件上传按钮</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                U使用一个按钮类 <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, 或 <code>&lt;input&gt;</code> 元素.
                            </p>

                            <div class="fileupload btn btn-primary waves-effect waves-light">
                                <span>Upload</span>
                                <input type="file" class="upload">
                            </div>
                            <div class="fileupload btn btn-purple waves-effect waves-light">
                                <span><i class="ion-upload m-r-5"></i>Upload</span>
                                <input type="file" class="upload">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- End of Row -->


        <!-- Row start -->
        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>与标签结合的按钮</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                使用 <code>.btn-@yoursocial</code> 父类的类.
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-facebook waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-facebook"></i>
                                   </span>Facebook</button>

                                <button type="button" class="btn btn-twitter waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-twitter"></i>
                                   </span>Twitter</button>

                                <button type="button" class="btn btn-linkedin waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-linkedin"></i>
                                   </span>Linkdin</button>

                                <button type="button" class="btn btn-dribbble waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-dribbble"></i>
                                   </span>Dribbble</button>

                                <button type="button" class="btn btn-googleplus waves-effect waves-light">
                                   <span class="btn-label"><i class="fa fa-google-plus"></i>
                                   </span>Google+</button>

                                <button type="button" class="btn btn-instagram waves-effect waves-light">
                                    <span class="btn-label"><i class="fa fa-instagram"></i> </span>Instagram
                                </button>

                                <button type="button" class="btn btn-pinterest waves-effect waves-light">
                                    <span class="btn-label"><i class="fa fa-pinterest"></i> </span>Pinterest
                                </button>

                                <button type="button" class="btn btn-dropbox waves-effect waves-light">
                                    <span class="btn-label"><i class="fa fa-dropbox"></i> </span>Dropbox
                                </button>

                                <button type="button" class="btn btn-flickr waves-effect waves-light">
                                    <span class="btn-label"><i class="fa fa-flickr"></i> </span>Flickr
                                </button>

                                <button type="button" class="btn btn-tumblr waves-effect waves-light">
                                    <span class="btn-label"><i class="fa fa-tumblr"></i> </span>Tumblr
                                </button>

                                <button type="button" class="btn btn-skype waves-effect waves-light">
                                    <span class="btn-label"><i class="fa fa-skype"></i> </span>Skype
                                </button>

                                <button type="button" class="btn btn-youtube waves-effect waves-light">
                                    <span class="btn-label"><i class="fa fa-youtube"></i> </span>Youtube
                                </button>

                                <button type="button" class="btn btn-github waves-effect waves-light">
                                    <span class="btn-label"><i class="fa fa-github"></i> </span>Github
                                </button>

                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6">
                            <h4 class="header-title m-t-0"><b>社交按钮</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                使用 <code>.btn-@yoursocial</code>再父类的类.
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-facebook waves-effect waves-light">
                                    <i class="fa fa-facebook"></i>
                                </button>

                                <button type="button" class="btn btn-twitter waves-effect waves-light">
                                    <i class="fa fa-twitter"></i>
                                </button>

                                <button type="button" class="btn btn-linkedin waves-effect waves-light">
                                    <i class="fa fa-linkedin"></i>
                                </button>

                                <button type="button" class="btn btn-dribbble waves-effect waves-light">
                                    <i class="fa fa-dribbble"></i>
                                </button>

                                <button type="button" class="btn btn-googleplus waves-effect waves-light">
                                    <i class="fa fa-google-plus"></i>
                                </button>

                                <button type="button" class="btn btn-instagram waves-effect waves-light">
                                    <i class="fa fa-instagram"></i>
                                </button>

                                <button type="button" class="btn btn-pinterest waves-effect waves-light">
                                    <i class="fa fa-pinterest"></i>
                                </button>

                                <button type="button" class="btn btn-dropbox waves-effect waves-light">
                                    <i class="fa fa-dropbox"></i>
                                </button>

                                <button type="button" class="btn btn-flickr waves-effect waves-light">
                                    <i class="fa fa-flickr"></i>
                                </button>

                                <button type="button" class="btn btn-tumblr waves-effect waves-light">
                                    <i class="fa fa-tumblr"></i>
                                </button>

                                <button type="button" class="btn btn-skype waves-effect waves-light">
                                    <i class="fa fa-skype"></i>
                                </button>

                                <button type="button" class="btn btn-youtube waves-effect waves-light">
                                    <i class="fa fa-youtube"></i>
                                </button>

                                <button type="button" class="btn btn-github waves-effect waves-light">
                                    <i class="fa fa-github"></i>
                                </button>


                                <br>


                                <button type="button" class="btn btn-facebook waves-effect waves-light">
                                    <i class="fa fa-facebook m-r-5"></i> Facebook
                                </button>

                                <button type="button" class="btn btn-twitter waves-effect waves-light">
                                    <i class="fa fa-twitter m-r-5"></i> Twitter
                                </button>

                                <button type="button" class="btn btn-linkedin waves-effect waves-light">
                                    <i class="fa fa-linkedin m-r-5"></i> Linkedin
                                </button>

                                <button type="button" class="btn btn-dribbble waves-effect waves-light">
                                    <i class="fa fa-dribbble m-r-5"></i> Dribbble
                                </button>

                                <button type="button" class="btn btn-googleplus waves-effect waves-light">
                                    <i class="fa fa-google-plus m-r-5"></i> Google+
                                </button>

                                <button type="button" class="btn btn-instagram waves-effect waves-light">
                                    <i class="fa fa-instagram m-r-5"></i> Instagram
                                </button>

                                <button type="button" class="btn btn-pinterest waves-effect waves-light">
                                    <i class="fa fa-pinterest m-r-5"></i> Pinterest
                                </button>

                                <button type="button" class="btn btn-dropbox waves-effect waves-light">
                                    <i class="fa fa-dropbox m-r-5"></i> Dropbox
                                </button>

                                <button type="button" class="btn btn-flickr waves-effect waves-light">
                                    <i class="fa fa-flickr m-r-5"></i> Flickr
                                </button>

                                <button type="button" class="btn btn-tumblr waves-effect waves-light">
                                    <i class="fa fa-tumblr m-r-5"></i> Tumblr
                                </button>

                                <button type="button" class="btn btn-skype waves-effect waves-light">
                                    <i class="fa fa-skype m-r-5"></i> Skype
                                </button>

                                <button type="button" class="btn btn-youtube waves-effect waves-light">
                                    <i class="fa fa-youtube m-r-5"></i> Youtube
                                </button>

                                <button type="button" class="btn btn-github waves-effect waves-light">
                                    <i class="fa fa-github m-r-5"></i> Github
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- End of Row -->



        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

    </body>
</html>